<template>

  <view class="bg-c3" style="height:100vh;touch-action:none">
    <view class="status_bar">
    </view>
    <view class="heade">
      <view class="pd">
        <view class="search-wrap">
          <view class="grace-iconfont icon-arrow-left" @click="handleBack">
          </view>
          <input type="text" placeholder="搜索" placeholder-style="color:#eee">
          <view class="grace-iconfont icon-search"></view>
          <view class="lmqicon uni-icon-gengduo" @click="handleMore(true)"></view>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="container-heade border-bottom">
        <view class="wrap" @click="targetUrl">
          <view class="photo">
            <image src="../../images/home/inform-left.png" alt=""></image>
          </view>
          <text class="text1">转到速付宝账户</text>
          <text class="text2">安全 免费 到账快</text>
        </view>
      </view>

      <view class="container-content">
        <view class="title border-bottom">
          <text>最近</text>
          <view class="right">
            <text class="text">全部朋友</text>
            <view class="grace-iconfont icon-arrow-right"></view>
          </view>
        </view>
        <view class="ul">
          <view class="li border-bottom">
            <image src="../../images/friend/txl-photo.png" alt=""></image>
            <view class="li-right">
              <text class="text1">刘德华</text>
              <text class="text2">151*****1122</text>
            </view>
          </view>
          <view class="li border-bottom">
            <image src="../../images/friend/txl-photo.png" alt=""></image>
            <view class="li-right">
              <text class="text1">刘德华</text>
              <text class="text2">151*****1122</text>
            </view>
          </view>
          <view class="li border-bottom">
            <image src="../../images/friend/txl-photo.png" alt=""></image>
            <view class="li-right">
              <text class="text1">刘德华</text>
              <text class="text2">151*****1122</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uniPopup :show="moreShow" type="bottom" @hidePopup="handleMore(false)">
      <navigator url="/pages/HomePage/Accounts/transferRecord" hover-class="none" tag="view" class="popup-item">
        转账记录
      </navigator>
      <navigator url="/pages/HomePage/Accounts/accountsHelp" hover-class="none" tag="view"  class="popup-item border">
        使用帮助
      </navigator>
      <view class="popup-item" @click="handleMore(false)">取消</view>
    </uniPopup>

  </view>
</template>

<script>
import uniPopup from "@/components/uni-app/uni-popup.vue";

export default {
  components: { uniPopup },
  data() {
    return {
      moreShow: false
    };
  },
  methods: {
    targetUrl() {
      uni.navigateTo({
        url: "/pages/HomePage/Accounts/girokonto"
      });
    },
    handleMore(bl) {
      this.moreShow = bl;
    },
    handleBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.heade {
  .pd {
    padding: 40upx 30upx;
  }
  .search-wrap {
    position: relative;
    @include flex-center;
    width: 100%;
    height: 60upx;
    .icon-arrow-left {
      padding-right: 20upx;
      color: #fff;
      @include flex-center;
      font-size: 48upx;
    }

    .icon-search {
      position: absolute;
      left: 100upx;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 30upx;
    }
    .uni-icon-gengduo {
      padding: 20upx;
      font-size: 40px;
      color: #fff;
    }
    input {
      margin: 0;
      border: none;
      padding-left: 100upx;
      width: 400upx;
      height: 100%;
      background: #1c73ba;
    }
    input::-webkit-input-placeholder {
      color: #ddd;
    }
    input::-moz-input-placeholder {
      color: #ddd;
    }
    input::-ms-input-placeholder {
      color: #ddd;
    }
  }
}

.container {
  width: 630upx;
  height: 875upx;
  background: #fff;
  margin: 60upx auto;
  border-radius: 8upx;
  .container-heade {
    @include flex-center;
    height: 290upx;
    margin: 0 44upx;
    .wrap {
      @include flex-cl;
      width: 400upx;
      height: 100%;
    }
    .photo {
      margin-top: 20upx;
      width: 90upx;
      height: 90upx;
      background: rgb(84, 118, 192);
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .text1 {
      padding-top: 20upx;
      font-size: 32upx;
    }
    .text2 {
      line-height: 1;
      color: #bbb;
      font-size: 24upx;
    }
  }
  .container-content {
    .title {
      height: 400;
      @include flex-bw;
      padding: 0 30upx;
      margin-top: 50upx;
      .right {
        display: flex;
        .text {
          line-height: 1;
        }
        .icon-arrow-right {
          line-height: 1;
          font-size: 30upx;
          color: #aaa;
        }
      }
    }
    .ul {
      .li {
        height: 115upx;
        display: flex;
        align-items: center;
        padding: 0 40upx;
        image {
          width: 70upx;
          height: 70upx;
          background: #1c73ba;
        }
        .li-right {
          height: 60upx;
          line-height: 1;
          padding-left: 30upx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .text2 {
            margin-top: 12upx;
            font-size: 24upx;
            color: #aaa;
          }
        }
      }
    }
  }
}

.popup-item {
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  &:active{
    background: #eee;
  }
  &:nth-child(3) {
    margin-top: 10upx;
  }
}
</style>